<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <!--     <h2>人员信息</h2>
    <h3>姓名:{{personName}}</h3>
    <h3>年龄:{{personAge}}</h3>
    <input type="submit" @click="showClick1"> -->
    <Person></Person>
    <hr>
    <School></School>
    <!--     <h2>学院信息</h2>
    <h3>学校:{{schoolName}}</h3>
    <h3>位置:{{schoolAddres}}</h3>
    <input type="submit" @click="showClick2"> -->
  </div>
</body>

<script type="text/javascript">
  let Person = Vue.extend({
    data() {
      return {
        personAge: 18,
        personName: '成成',
      }
    },
    computeds: {},
    methods: {
      showClick1() {
        alert(`我叫${this.personName},今年${this.personAge}`)
      },
    },
    template: `    
                <div>
                  <h2>人员信息</h2>
                  <h3>姓名:{{personName}}</h3>
                  <h3>年龄:{{personAge}}</h3>
                  <input type="submit" @click="showClick1">
                </div>
              `

  })
  let School = Vue.extend({
    data() {
      return {
        schoolAddres: '北京昌平',
        schoolName: '中央戏剧学院'
      }
    },
    computeds: {},
    methods: {
      showClick2() {
        alert(`${this.schoolName}坐落于${this.schoolAddres}`)
      },
    },
    template: `    
                <div>
                  <h2>学院信息</h2>
                  <h3>学校:{{schoolName}}</h3>
                  <h3>位置:{{schoolAddres}}</h3>
                  <input type="submit" @click="showClick2">
                </div>
              `

  })
  let vm = new Vue({
    el: '#demo',
    components: {
      Person,
      School
    }
    // data: {
    //   personAge: 18,
    //   personName: '成成',
    //   schoolAddres: '北京昌平',
    //   schoolName: '中央戏剧学院'
    // },
    // methods: {
    //   showClick1() {
    //     alert(`我叫${this.personName},今年${this.personAge}`)
    //   },
    //   showClick2() {
    //     alert(`${this.schoolName}坐落于${this.schoolAddres}`)
    //   }
    // }
  })

</script>

</html>